<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('信息补录')" />
    <style>
        .label-tip{
            padding-bottom: 5px ;
            border-bottom: 2px solid #f5f5f5;
            margin: 15px 0;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime" autocomplete="off"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime" autocomplete="off"/>
                        </li>
                        <li>
                            <label>车牌号：</label>
                            <input type="text" name="plateNo" style="width: 100px;"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>


<!--信息补录-->
<div id="completeDialog" style="display: none;" class="wrapper wrapper-content   ibox-content">
    <form class="form-horizontal m" id="form-register-complete">
        <input name="registerId"  type="hidden">
        <h4 class="label-tip">必填项</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">车牌号码：</label>
            <div class="col-sm-8">
                <input name="plateNo" v-model="plateNo"  class="form-control" type="text" required disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">混凝土标号：</label>
            <div class="col-sm-8">
                <input name="concreteType" v-model="concreteType" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">混凝土方量(m³)：</label>
            <div class="col-sm-8">
                <input name="concreteVolume" v-model="concreteVolume"  class="form-control" type="number" required>
            </div>
        </div>
        <h4 class="label-tip">选填项</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label">公司名称：</label>
            <div class="col-sm-8">
                <input name="companyName" v-model="companyName"  class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商混站名：</label>
            <div class="col-sm-8">
                <input name="mixingStation" v-model="mixingStation"  class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">机组编号：</label>
            <div class="col-sm-8">
                <input name="machineUnit" v-model="machineUnit"  class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">起始坍落度mm：</label>
            <div class="col-sm-8">
                <input name="slumpStart" v-model="slumpStart"  class="form-control" type="number">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">工地坍落度mm：</label>
            <div class="col-sm-8">
                <input name="slumpEnd" v-model="slumpEnd"  class="form-control" type="number">
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "concrete/register";

    var openDialog = function(seqId, plateNo){
        app.openDialog(seqId, plateNo);
    }

    var app = new Vue({
        el: '#completeDialog',
        data: {
            plateNo:'',
            seqId: '',
            concreteType:'',
            concreteVolume:'',
            companyName:'',
            mixingStation:'',
            machineUnit: '',
            slumpStart:'',
            slumpEnd:'',
        },
        methods: {
            openDialog(seqId, plateNo){
                this.clearForm();
                this.seqId = seqId;
                this.plateNo = plateNo;
                console.log(plateNo);
                layer.open({
                    title: '信息补录',
                    type: 1,
                    area: ['700px', '600px'],
                    content: $('#completeDialog'),
                    btn: ['确定', '取消'],
                    yes:() => {
                        this.saveCompleteInfo();
                    }
                });
            },
            clearForm() {
                this.plateNo = '',
                this.seqId =  '',
                this.concreteType = '',
                this.concreteVolume = '',
                this.companyName = '',
                this.mixingStation = '',
                this.machineUnit =  '',
                this.slumpStart = '',
                this.slumpEnd = '';
            },
            saveCompleteInfo() {
                if (!$("#form-register-complete").validate().form()) {
                   return;
                }
                //保存信息
                $.operate.post(prefix + '/saveSequenceRegisterInfo', {
                    seqId: this.seqId,
                    plateNo: this.plateNo,
                    concreteType: this.concreteType,
                    concreteVolume: this.concreteVolume,
                    companyName: this.companyName,
                    mixingStation: this.mixingStation,
                    machineUnit: this.machineUnit,
                    slumpStart: this.slumpStart,
                    slumpEnd: this.slumpEnd
                }, res => {
                    console.log(res);
                    if (res.code === 0) {
                        $.modal.alertSuccess();
                        layer.closeAll();
                        $.table.refresh();
                    } else {
                        $.modal.alertError(res.msg);
                    }
                });
            }
        }
    });


    $(function() {
        var options = {
            app: app,
            url: prefix + "/queryUnbindSequence",
            modalName: "数据查询",
            columns: [
                {
                    field: 'workDate',
                    title: '工作日期'
                },
                {
                    field: 'plateNo',
                    title: '车牌号'
                },
                {
                    field: 'workSequence',
                    title: '工作序号'
                },
                {
                    field: 'startTime',
                    title: '开始时间'
                },
                {
                    field: 'endTime',
                    title: '结束时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: (value, row, index) => {
                        var actions = [];
                        const id = "'" + row.id + "'";
                        const plateNo = "'" + row.plateNo + "'";
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="openDialog(' + id + ',' + plateNo + ')"><i class="fa fa-edit"></i>补录</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


</script>
</body>

</html>